<script setup lang="ts">

import {useModal} from 'naive-ui'
import {defineComponent, ref} from 'vue'

const modal = useModal()
const showModal = ref(false)

function showCardPreset() {
  modal.create({
    title: 'Card 预设拖拽',
    draggable: true,
    preset: 'card',
    content: '无意义的内容....'
  })
}

</script>

<template>
  <n-flex>
    <n-button @click="showCardPreset">
      dialog 预设（命令式 Api）
    </n-button>
  </n-flex>
  <n-modal
    :show="showModal"
    title="dialog 预设拖拽"
    preset="dialog"
    draggable
    :style="{ width: '800px' }"
  >
    <div>无意义的内容...</div>
    <div>无意义的内容...</div>
  </n-modal>
</template>

